<template>
  <el-dialog :modelValue="show" width="50%" :append-to-body="appendToBody" class="tips-modal-wrap" align-center :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false">
    <div class="tips-content">
      <div class="icon">
        <img :src="successIcon" class="icon-img" alt="" v-if="type === 'success'" />
        <img :src="warningIcon" class="icon-img" alt="" v-else-if="type === 'warning'" />
        <img :src="errorIcon" class="icon-img" alt="" v-else-if="type === 'error'" />
      </div>
      <!--        <div class="tips-text">是否确认提交排产？系统将自动传输审核调整数据至排料系统提交后可在生产管理或订单列表中查看订单</div>-->
      <div class="tips-text">{{ message }}</div>
      <div class="actions flex-center" v-if="showFooter">
        <div class="cancel flex-center pointer mr10" @click="close" v-if="isShowCancelBtn">取消</div>
        <div class="confirm flex-center pointer ml10" @click="confirm">{{ confirmText }}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineExpose, defineEmits, defineProps, computed } from "vue"

import errorIcon from "@/assets/images/error-icon.svg"
import successIcon from "@/assets/images/success-icon.svg"
import warningIcon from "@/assets/images/warning-icon.svg"

const emits = defineEmits(["confirmDel", "update:show", "confirm"])

/**
 * @param string type warning: 警告.success：成功.error：错误
 * @param string message 展示提示消息
 * @param string confirmText 提交按钮展示文字
 * */
const props = defineProps({
  type: {
    type: String,
    default: "success"
  },
  message: {
    type: String,
    default: ""
  },
  confirmText: {
    type: String,
    default: "确认提交"
  },
  isShowCancelBtn: {
    type: Boolean,
    default: true
  },
  show: {
    type: Boolean,
    default: false
  },
  appendToBody:{
    type: Boolean,
    default: false
  },
  showFooter: {
    type: Boolean,
    default: false
  }
})

computed({
  get() {
    return props.show
  },
  set(value) {
    emits("update:show", value)
  }
})

const close = () => {
  emits("update:show", false)
}

const confirm = () => {
  emits("update:show", false)
  emits("confirm")
}
</script>

<style lang="scss">
.tips-modal-wrap {
  border-radius: 16px;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
  }
  // :deep(.el-dialog) {
  //   border-radius: 16px;
  // }
  // :deep(.el-dialog__header) {
  //   display: none;
  // }
  // :deep(.el-dialog__body) {
  // }
  .tips-content {
    padding: 50px 37px 27px;
    .icon {
      text-align: center;
      margin-bottom: 36px;
      .icon-img {
        width: 63px;
        height: 63px;
      }
    }
    .tips-text {
      text-align: center;
      color: #333333;
      font-size: 43px;
      margin-bottom: 50px;
    }
    .actions {
      border-top: 1px solid #f2f2f2;
      padding-top: 30px;
    }
    .actions .cancel,
    .actions .confirm {
      padding: 32px 48px;
      font-size: 36px;
      //width: 126px;
      //height: 40px;
      //font-size: 16px;
      border-radius: 36px;
    }
    .actions .cancel {
      border: 1px solid #d7d7d7;
      color: #333333;
      margin-right: 20px;
    }
    .actions .confirm {
      background: #006eff;
      color: #fff;
    }
  }
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pointer {
  cursor: pointer;
}
</style>
